// 左边导航栏组件
<template>
  <div>
    <el-menu
      default-active="/pharmacy"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#0c6785"
      text-color="#fff"
      active-text-color="#fff"
      router
      :collapse="isCollapse"
    >
      <!-- 首页导航 -->
      <el-menu-item>
        <span slot="title" style="font-size:20px">药房医生系统</span>
      </el-menu-item>
      <el-menu-item index="/pharmacy">
        <i class="el-icon-menu"></i>
        <span slot="title">药房库存信息</span>
      </el-menu-item>
      <el-menu-item index="/pharmacy/showPharmacyIn">
        <i class="el-icon-setting"></i>
        <span slot="title">库房配送</span>
      </el-menu-item>
      <!-- 展示所有数据 -->
      <el-menu-item index="/pharmacy/ShowStorageIn">
        <i class="el-icon-setting"></i>
        <span slot="title">待上架</span>
      </el-menu-item>
    <!-- 下拉导航 -->
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>库存管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/pharmacy/showSupplement">药品补充</el-menu-item>
        <el-menu-item index="/pharmacy/showUnqualifiedMedicine">退回仓库</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
	<el-menu-item index="/pharmacy/showDispense">
	  <i class="el-icon-menu"></i>
	  <span slot="title">药房配药</span>
	</el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  // 注销监听
  destroyed() {
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
    window.removeEventListener("unload", (e) => this.unloadHandler(e));
  },
  // 创建页面关闭的监听
  mounted(){
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    window.addEventListener("unload", (e) => this.unloadHandler(e));
  },
  //调用父类的变量
  props:['isCollapse'],
  data() {
    return {
      // isCollapse: true
    }
  },
  methods: {
    //页面关闭之前的提示
    beforeunloadHandler(e) {
      if (e) {
        e = e || window.event;
        console.log(e);
        if (e) {
          e.returnValue = "关闭提示";
        }
        return "关闭提示";
      }
    },
    //页面关闭之后
    async unloadHandler(e) {
      // 退出登录
      await this.handleGoLog();
    },
    handleGoLog(){
      // 清空本地实例化
      localStorage.removeItem("user");
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
